<template>
	<view class="content">
		<view class="top-box">
			<!-- 状态栏盒子 -->
			<view :style="{width: '100%',height: statusHeight+'px'}"></view>
			<!-- 头像盒子 -->
			<view class="photobox">
				<view class="left" @click="goLogin">
					<view class="photo">
						<image :src="userData.headUrl?userData.headUrl:'/static/logo.png'"></image>
					</view>
					<view class="name-box">
						<view class="name">{{userData.nickname?userData.nickname:'请登录~'}}</view>
						<view class="id" v-if="userData.userNO">
							<text>用户编号：{{userData.userNO}}</text>
							<image src="/static/me/copy.png" @click.stop="copy"></image>
						</view>
					</view>
				</view>
				<view class="right">
					<image src="/static/me/sz_setting-one.png" @click="goUrl('/pagesnew/me/setUp')"></image>
				</view>
			</view>
			<!-- 余额盒子 -->
			<view class="price-box" @click="goUrl('/pages/index/recharge')">
				<view class="left">
					<view class="a">{{userData.balance?userData.balance:'0.00'}}</view>
					<view class="b">幸运豆</view>
				</view>
				<view class="right">立即充值</view>
				<view></view>
			</view>
		</view>
		<!-- 订单盒子 -->
		<view class="order-box">
			<view class="box">
				<view class="tle">
					<text class="text1">我的订单</text>
					<view class="text2" @click="goUrl('/pagesnew/me/order')">
						<text>查看全部</text>
						<image src="/static/me/yb.png"></image>
					</view>
				</view>
				<view class="qqqw">
					<view class="item relative" v-for="(item,index) in orderList" :key="index" @click="goUrl('/pagesnew/me/order?id='+item.id)">
						<view class="imga">
							<image :src="item.image"></image>
						</view>
						<view class="texta">{{item.name}}</view>
						<view class="num" v-if="item.number>0&&(index==0||index==1)">{{item.number}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 其他服务 -->
		<view class="item-box">
			<view class="title">其他服务</view>
			<view class="box">
				<view class="item" v-for="(item,index) in itemList" :key="index" @click="goUrl(item.url)">
					<button style="background: none;line-height: 1.4;" v-if="item.name=='联系客服'" @click.stop="openKefu">
						<view class="imga">
							<image :src="item.image"></image>
						</view>
						<view class="texta">{{item.name}}</view>
					</button>
					<block v-else>
						<view class="imga">
							<image :src="item.image"></image>
						</view>
						<view class="texta">{{item.name}}</view>
						<view class="num" v-if="item.name=='现金红包'&&userData.availableRedBagCount>0">{{userData.availableRedBagCount }}</view>
						<view class="num" v-if="item.name=='我的龙珠'&&userData.dragonBall>0">{{userData.dragonBall }}</view>
					</block>
				</view>
			</view>
		</view>
		<!--兑换礼包码弹窗 -->
		<my-popup ref="showPoup" type="center" :maskClick="true" @change="changePoup" class="pop-box">
			<view class="uni-tip-poup">
				<image class="close" src="/static/me/close.png" @click="closePoup"></image>
				<view class="title">请输入礼品码</view>
				<view class="input-box">
					<input class="input" placeholder="礼品码" v-model="giftCode"/>
				</view>
				<view class="btn-box">
					<view class="btn" @click="exchange">确认兑换</view>
				</view>
			</view>
		</my-popup>
		<!--更多福利弹窗 -->
		<my-popup ref="showFuli" type="center" :maskClick="true" @change="changeFuli" class="pop-box">
			<view class="uni-tip-fuli">
				<image class="close" src="/static/index/closepop.png" @click="closeFuli"></image>
				<image class="codeimg" src="https://home.miaokaikeji.com/web/applet/newimg/codeimg.png"></image>
				<image class="btn" src="/static/me/jietu.png"></image>
			</view>
		</my-popup>
		<!--获得红包弹窗 -->
		<my-popup ref="showGetRed" type="center" :maskClick="false" @change="changeGetRed" class="pop-box">
			<view class="uni-tip-GetRed" @click="closeGetRed">
				<image class="closepop" src="/static/index/closepop.png"></image>
				<view class="price">
					<text>{{getRedPrice}}</text>元
				</view>
			</view>
		</my-popup>
	</view>
</template>

<script>
	var _this;
	import statusBar from '@/components/uni-nav-bar/uni-status-bar.vue';
	import { priceInteger } from "@/utils";
	export default {
		components: {
			statusBar
		},
		data() {
			return {
				statusHeight:63,
				orderList:[
					{id:1,name:'待发货',image:'/static/me/fh(2).png'},
					{id:2,name:'待收货',image:'/static/me/fh(1).png'},
					{id:3,name:'已完成',image:'/static/me/pj.png'},
					{id:4,name:'已取消',image:'/static/me/qwert.png'}
				],
				itemList:[
					{name:'赠送记录',image:'/static/me/a1(3).png',url:'/pagesnew/me/giftRecord'},
					{name:'开盒记录',image:'/static/me/a2(1).png',url:'/pagesnew/me/openboxRecord'},
					{name:'收货信息',image:'/static/me/a2(4).png',url:'/pages/index/address'},
					{name:'玩法介绍',image:'/static/me/a2(5).png',url:'/pages/index/webview?url=https://home.miaokaikeji.com/web/playProduce/produce.html'},
					{name:'联系客服',image:'/static/me/a2(8).png'},
					{name:'现金红包',image:'/static/me/a2(7).png',url:'/pages/me/redEmveList'},
					{name:'礼品码兑换',image:'/static/me/a2(9).png',url:'pouop'},
					{name:'更多福利',image:'/static/me/fuli.png',url:'pouop1'},
					{name:'我的龙珠',image:'/static/me/longzhu.png',url:'/pagesnew/dragonballs/list'},
					{name:'平台资质',image:'/static/me/ziziicon.png',url:'/pagesnew/me/oppolist'}
				],
				userData:{}, //用户信息
				giftCode:'', //礼品码
				getRedPrice:'',
			};
		},
		onLoad(options) {
			_this=this;
		},
		onShow() {
			if(this.$cookie.get('token')){
				_this.getUserData();
			}
		},
		mounted() {
			// 设置顶部固定距离
			_this.statusHeight = uni.getSystemInfoSync().statusBarHeight+43;
		},
		methods:{
			goUrl(url){
				if(url=='pouop'){
					// 兑换礼包码
					_this.openPoup();
				}else if(url=='pouop1'){
					// 更多福利
					_this.openFuli();
				}else{
					_this.$routerTo.navigateTo({
						path: url
					});
				}
			},
			openKefu(){
				// #ifndef APP-PLUS
				uni.showToast({
					title: '请在app打开',icon:"none"
				});
				// #endif
				let wechat = null
				plus.share.getServices(res => {
				wechat = res.find(i => i.id === 'weixin')
					if (wechat) {
						wechat.openCustomerServiceChat({
							corpid: 'ww446a1d00b1e3c6e3',//企业ID
							url: 'https://work.weixin.qq.com/kfid/kfc5ed858320e565e2b',//客服地址
						}, src => {
							console.log("success:")
						}, err => {
							console.log("error:")
						})
					} else {
							uni.showToast({
							title: '当前环境不支持微信操作',icon:"error"
						});
					}
				});
			},
			onInput(event){
				_this.giftCode=event.target.value;
			},
			// 兑换礼包码弹窗事件
			changePoup(e) {},
			closePoup() {
				_this.$nextTick(() => {
					_this.$refs['showPoup'].close();
				});
			},
			openPoup() {
				_this.$nextTick(() => {
					_this.$refs['showPoup'].open();
				});
			},
			// 更多福利弹窗
			changeFuli(e) {},
			closeFuli() {
				_this.$nextTick(() => {
					_this.$refs['showFuli'].close();
				});
			},
			openFuli() {
				_this.$nextTick(() => {
					_this.$refs['showFuli'].open();
				});
			},
			// 跳转登录界面（抛弃缓存页面）
			goLogin(){
				if(!_this.userData.userNO){
					_this.$routerTo.reLaunch({
						path: '/pages/login/login'
					});
				}
				
			},
			exchange(){
				if(!_this.giftCode){
					_this.$api.msg('请输入兑换礼品码');
					return;
				}
				_this.$HTTP({
					method: 'POST',
					url: 'shopServer/voucher/exchange',
					data: {
						code: _this.giftCode,
						time: Date.parse(new Date())
					},
					header:'form'
				}).then(res => {
					_this.closePoup();
					_this.giftCode='';
					_this.getRedPrice=priceInteger(res);
					_this.openGetRed();
					_this.getUserData();
				}).catch(err => {
					console.log(err);
				});
			},
			getUserData(){
				_this.$HTTP({
					method: 'GET',
					url: 'shopServer/user/getUserInfo',
					data: {
						time: Date.parse(new Date())
					}
					// header:'form'
				}).then(res => {
					// _this.orderList[0].number=res.waitPayCount;
					_this.orderList[0].number=res.waiSendCount;
					_this.orderList[1].number=res.waiAcceptCount;
					_this.orderList[2].number=res.finishCount;
					_this.orderList[3].number=res.cancelCount;
					res.redBagTotalAmount=priceInteger(res.redBagTotalAmount);
					res.balance=priceInteger(res.balance);
					_this.userData=res;
				}).catch(err => {
					console.log(err);
				});
			},
			// 获得红包弹窗事件
			changeGetRed(e) {},
			closeGetRed() {
				_this.$nextTick(() => {
					_this.$refs['showGetRed'].close();
				});
			},
			openGetRed() {
				_this.$nextTick(() => {
					_this.$refs['showGetRed'].open();
				});
			},
			copy() {
				uni.setClipboardData({
					data: _this.userData.userNO+'',
					success: function() {
						_this.$api.msg('已复制进入粘贴板');
					}
				});
			},
		}
	}
</script>

<style>
	page{
		background: white;
	}
</style>
<style lang="scss" scoped>
// 获得红包弹窗
.uni-tip-GetRed{
	width: 544rpx;
	height: 461rpx;
	background-image: url('https://home.miaokaikeji.com/web/applet/newimg/popbg11.png');
	background-size: 100% 100%;
	position: relative;
	z-index: 10;
	.closepop{
		position: absolute;
		right: -36rpx;
		top: -76rpx;
		width: 58rpx;
		height: 58rpx;
	}
	.price{
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 270rpx;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		font-size: 36rpx;
		font-weight: bold;
		color: #FF355D;
		transform: translateX(-40rpx) translateY(20rpx);
		text{
			font-size: 80rpx;
			transform: translateY(15rpx);
		}
	}
}
	// 更多福利弹窗
	.uni-tip-fuli{
		width: 516rpx;
		height: 688rpx;
		background-image: url('https://home.miaokaikeji.com/web/applet/newimg/my-qunbg.png');
		background-size: 100% 100%;
		position: relative;
		z-index: 10;
		.close{
			width: 58rpx;
			height: 58rpx;
			position: absolute;
			left: calc(50% - 29rpx);
			bottom: -88rpx;
		}
		.btn{
			width: 185rpx;
			height: 49rpx;
			position: absolute;
			bottom: 60rpx;
			left: calc(50% - 92rpx);
		}
		.codeimg{
			width: 270rpx;
			height: 270rpx;
			position: absolute;
			bottom: 200rpx;
			left: calc(50% - 150rpx);
		}
	}
	// 兑换礼包码弹窗
	.uni-tip-poup{
		width: 632rpx;
		height: 715rpx;
		background-image: url('https://home.miaokaikeji.com/web/applet/newimg/my-duihuanbg.png');
		background-size: 100% 100%;
		box-sizing: border-box;
		padding: 279rpx 116rpx 0 116rpx;
		overflow: hidden;
		position: relative;
		z-index: 10;
		.close{
			width: 61rpx;
			height: 61rpx;
			position: absolute;
			right: 0;
			top: 34rpx; 
		}
		.title{
			width: 100%;
			font-size: 32rpx;
			font-weight: 600;
			color: #FE2D28;
			text-align: center;
		}
		.input-box{
			height: 96rpx;
			background: rgba(255, 62, 30, 0.07);
			border-radius: 48rpx;
			width: 100%;
			margin-top: 35rpx;
			box-sizing: border-box;
			padding: 0 20rpx;
			.input{
				width: 100%;
				height: 96rpx;
				font-size: 30rpx;
				text-align: center;
			}
		}
		.btn-box{
			width: 100%;
			display: flex;
			justify-content: center;
			margin-top: 60rpx;
			.btn{
				width: 328rpx;
				height: 91rpx;
				line-height: 91rpx;
				text-align: center;
				font-size: 32rpx;
				color: #FFFFFF;
				background-image: url('https://home.miaokaikeji.com/web/applet/newimg/my-duihuanbtn.png');
				background-size: 100% 100%;
			}
		}
	}
	.content{
		width: 100%;
		box-sizing: border-box;
		padding-bottom: 60rpx;
		.top-box{
			width: 100%;
			height: 537rpx;
			background-image: url('https://home.miaokaikeji.com/web/applet/newimg/my-box.png');
			background-size: 100% 100%;
			box-sizing: border-box;
			padding: 0 37rpx 0 30rpx;
			.photobox{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					display: flex;
					align-items: center;
					.photo{
						width: 140rpx;
						height: 140rpx;
						image{
							width: 140rpx;
							height: 140rpx;
							border-radius: 50%;
						}
					}
					.name-box{
						width: 100%;
						margin-left: 30rpx;
						.name{
							width: 100%;
							font-size: 36rpx;
							color: #000000;
						}
						.id{
							width: 100%;
							margin-top: 10rpx;
							font-size: 24rpx;
							color: #999999;
							display: flex;
							align-items: center;
							image{
								margin-left: 20rpx;
								width: 38rpx;
								height: 38rpx;
							}
						}
					}
				}
				.right{
					width: 49rpx;
					height: 49rpx;
					image{
						width:49rpx;
						height: 49rpx;
					}
				}
			}
			.price-box{
				width: 100%;
				height: 182rpx;
				background-image: url('https://home.miaokaikeji.com/web/applet/newimg/my-redbg.png');
				background-size: 100% 100%;
				margin-top: 30rpx;
				box-sizing: border-box;
				padding: 0 55rpx 0 65rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					width: 100%;
					transform: translateY(-15rpx);
					.a{
						width: 100%;
						font-size: 42rpx;
						font-weight: bold;
						color: #FFFFFF;
					}
					.b{
						color: #FFFFFF;
						font-size: 28rpx;
						margin-top: 5rpx;
					}
				}
				.right{
					transform: translateY(-10rpx);
					width: 230rpx;
					height: 50rpx;
					line-height: 50rpx;
					background: #FFFFFF;
					border-radius: 35rpx;
					text-align: center;
					font-size: 26rpx;
					color: #FF9416;
					margin-left: 20rpx;
				}
			}
		}
		.order-box{
			width: 100%;
			box-sizing: border-box;
			padding: 0 55rpx 0 65rpx;
			.box{
				width: 100%;
				.tle{
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.text1{
						font-size: 32rpx;
						font-weight: bold;
						color: #000000;
					}
					.text2{
						display: flex;
						align-items: center;
						text{
							font-size: 28rpx;
							color: #999999;
						}
						image{
							margin-left: 10rpx;
							width: 32rpx;
							height: 32rpx;
						}
					}
				}
				.qqqw{
					width: 100%;
					height: 170rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.item:nth-child(1){
						margin-left: 0;
					}
					.item{
						width: 100rpx;
						.imga{
							width: 100%;
							display: flex;
							justify-content: center;
							image{
								width: 64rpx;
								height: 64rpx;
							}
						}
						.texta{
							width: 100%;
							text-align: center;
							margin-top: 17rpx;
							font-size: 28rpx;
							color: #333333;
						}
						.num{
							width: 30rpx;
							height: 30rpx;
							border-radius: 50%;
							background: #FF2643;
							position: absolute;
							right: 0;
							top: 0;
							color: white;
							font-size: 20rpx;
							text-align: center;
							line-height: 30rpx;
						}
					}
				}
			}
		}
		.item-box{
			width: 100%;
			margin-top: 45rpx;
			.title{
				width: 100%;
				font-size: 32rpx;
				font-weight: bold;
				color: #000000;
				box-sizing: border-box;
				padding: 0 0 0 65rpx;
			}
			.box{
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;
				box-sizing: border-box;
				padding: 0 55rpx 0 25rpx;
				.item{
					width: 140rpx;
					margin-top: 50rpx;
					margin-left: 25rpx;
					position: relative;
					.imga{
						width: 100%;
						display: flex;
						justify-content: center;
						image{
							width: 50rpx;
							height: 50rpx;
						}
					}
					.texta{
						width: 100%;
						text-align: center;
						margin-top: 15rpx;
						font-size: 28rpx;
						color: #333333;
					}
					.num{
						width: 30rpx;
						height: 30rpx;
						border-radius: 50%;
						background: #FF2643;
						position: absolute;
						right: 20rpx;
						top: -10rpx;
						color: white;
						font-size: 20rpx;
						text-align: center;
						line-height: 30rpx;
					}
				}
			}
		}
	}
</style>
